<template>
  <div style="margin: 10px;">
    <el-breadcrumb separator-class="el-icon-arrow-right"
                   style="margin-bottom: 10px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>通知</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <template>
        <el-popconfirm title="确定删除吗？"
                       @onConfirm="deleteSelected">
          <el-button type="danger"
                     slot="reference">删除已选</el-button>
        </el-popconfirm>
      </template>
      <span style="margin-left: 10px;"></span>
      <el-button type="primary"
                 @click="setReadSelected">已选标为已读</el-button>
    </div>

    <el-table :data="notices.slice((currentPage - 1) * 10, currentPage * 10)"
              :row-class-name="getRowClass"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form ref="expandForm"
                   label-width="30px">
            <el-form-item>
              <div style="width: 600px;">
                {{props.row.content}}
              </div>
            </el-form-item>
            <el-form-item>
              <template>
                <el-popconfirm title="确定删除吗？"
                               @onConfirm="deleteNotice(props.$index)">
                  <el-button type="danger"
                             slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
              <span style="margin-left: 10px;">
                <el-button @click="setRead(props.row)">标为已读</el-button>
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="title"
                       label="标题">
      </el-table-column>
      <el-table-column prop="time"
                       label="时间">
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange"
                   :current-page="currentPage"
                   :page-size="10"
                   layout="total, prev, pager, next, jumper"
                   :total="notices.length"
                   :hide-on-single-page="true">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Notice',
  data () {
    return {
      currentPage: 1,
      notices: [
        {
          id: 0,
          title: '通知1',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知2',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 0,
          title: '通知3',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知4',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 0,
          title: '通知5',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知6',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知7',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 0,
          title: '通知8',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知9',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 0,
          title: '通知10',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 0,
          title: '通知11',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知12',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 0,
          title: '通知13',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: false
        },
        {
          id: 0,
          title: '通知14',
          time: '2020-1-1 19:00:00',
          content: '通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1通知内容1',
          read: true
        },
        {
          id: 1,
          title: '通知15',
          time: '2020-1-1 19:00:00',
          content: '通知内容3',
          read: true
        }
      ],
      selected: []
    }
  },
  methods: {
    getRowClass ({ row, rowIndex }) {
      if (!row.read) {
        return 'unread'
      } else return ''
    },
    deleteNotice (index) {
      this.notices.splice(index, 1)
      console.log(this.notices)
    },
    setRead (row) {
      row.read = true
    },
    handleSelectionChange (val) {
      this.selected = val
    },
    deleteSelected () {
      this.selected.forEach(slt => {
        this.notices.forEach(function (item, index, arr) {
          if (item === slt) {
            arr.splice(index, 1)
          }
        })
      })
    },
    setReadSelected () {
      this.selected.forEach(slt => {
        slt.read = true
      })
    },
    currentChange (page) {
      this.currentPage = page
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style>
.el-table .unread {
  background: #fde2e2;
}
</style>
